<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-07 
 -->

<template>
  <div class='banner'>
    <el-skeleton :loading="loading" animated>
      <template #template>
        <el-skeleton-item class="skeleton-img" variant="image" />
        <el-skeleton-item class="skeleton-img" variant="image" />
        <el-skeleton-item class="skeleton-img" variant="image" />
      </template>
      <template #default>
        <swiper :slides-per-view="3" :space-between="30" :autoplay="{ delay: 3000 }" :pagination="{ clickable: true }" v-if="lists" ref="mySwiper" class="banner_wrap">
          <swiper-slide v-for="item of lists" :key="item.imageUrl">
            <el-image :src="item.imageUrl" :alt="item.typeTitle" class="banner_img" @click="pathHandler(item)">
              <template #placeholder>
                <div class="image-slot">
                  <i class="iconfont icon-placeholder"></i>
                </div>
              </template>
            </el-image>
          </swiper-slide>
        </swiper>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue"
import SwiperCore, { Pagination, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
import 'swiper/swiper-bundle.min.css'
import { useInstance } from "@/hooks";
import { GETBANNER } from "@/api";
SwiperCore.use([Pagination, Autoplay]);
export default defineComponent({
  name: 'banner',
  components: { Swiper, SwiperSlide },
  setup(props, { emit, slots }) {
    const { $router: router, $Message: $message } = useInstance();
    const lists = ref([]);
    const loading = ref(true);
    const getBanner = async () => {
      try {
        const { code, banners } = await GETBANNER()
        if (code !== 200) return $message.error('数据请求失败');
        lists.value = banners;
        loading.value = false;
      } catch (error) {
        console.log(error)
      }
    };
    const pathHandler = (params) => {
      switch (params.targetType) {
        case 1: // 单曲
          router.push({ path: '/song', query: { id: params.targetId } })
          break
        case 10: // 专辑
          router.push({ path: '/album', query: { id: params.targetId } })
          break
        case 1000: // 歌单
          router.push({ path: '/playlist', query: { id: params.targetId } })
          break
        case 1004: // MV
          router.push({ path: '/mv', query: { id: params.targetId } })
          break
        case 3000: // 外链
          window.open(params.url, '_blank')
          break
      }
    };
    onMounted(getBanner);
    return {
      lists,
      loading,
      pathHandler
    }
  }
});

</script>

<style lang="scss" scoped>
.banner_wrap {
  position: relative;
  padding: 40px 0;
  height: 140px;
  font-size: 0;

  .banner_img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .swiper-slide,
  .el-image {
    height: 140px;
  }
}
.el-skeleton {
  display: flex;
  justify-content: space-between;
  padding: 40px 0;

  .skeleton-img {
    flex: 1;
    height: 140px;
    margin-right: 30px;

    &:last-child {
      margin: 0;
    }
  }
}
</style>

